<template>
  <view class="container">
    <scroll-view enable-flex scroll-y class="type-box">
      <view :class="['type', type_index == index ? 'active' : '']" @click="changeType(index)" v-for="(item, index) in type_list" :key="index">{{ item.name }}</view>
    </scroll-view>
    <scroll-view class="list" enable-flex scroll-y @scrolltolower="loadList">
      <navigator hover-class="none" :url="'/pages/service/service?id=' + item.id + '&hospital_id=' + hospital_id" class="service" v-for="(item, index) in list" :key="index">
        <image :src="item.img" mode="aspectFit"></image>
        <view class="info">
          <view class="name">{{ item.name }}</view>
          <view class="price">超值价：
            <text>{{ item.price }}元/次</text>
          </view>
          <view class="desc">{{ item.des }}</view>
        </view>
      </navigator>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hospital_id: 0,
      type_list: [],
      list: [],
      type_index: 0,
      page: 1,
      pagesize: 10
    };
  },
  methods: {
    changeType: function (index){
      this.type_index = index;
      this.page = 1;
      this.serviceList();
    },

    loadList: function () {
      this.serviceList(this.page + 1)
    },

    serviceList: function (incPage = 0) {
      var page = incPage ? incPage : this.page;

      uni.showLoading({
        title: '数据加载中...',
        mask: true
      })

      this.$http.post('/index/Api/serviceList', {
        type_id: this.type_list[this.type_index].id,
        page: page,
        pagesize: this.pagesize
      }).then((res) => {
        if (res.data.result == 1) {
          if (page == 1) {
            this.list = res.data.data;
          } else {
            // 加载更多
            var list = this.list;

            for (var i = 0; i < res.data.data.length; i++) {
              list.push(res.data.data[i]);
            }

            this.list = list;
            this.page = page;
          }

          setTimeout(() => {
            uni.hideLoading();
          }, 500)
        } else {
          uni.hideLoading();
          if (page == 1) {
            this.list = [];
          } else {
            this.$common.doErrorResult(res);
          }
        }
      })
    },

  },

  onLoad: function (options) {
    console.log(options)
    this.hospital_id = options.hospital_id ? options.hospital_id : 0;

    new Promise(resolve => {
      this.$http.post('/index/Api/serviceTypeList').then(res => {
        if (res.data.result == 1) {
          this.type_list = res.data.data;
          resolve();
        }
      })
    }).then(() => {
      this.serviceList();
    })
  }
}
</script>

<style lang="scss">
.container {
  display: flex;

  .type-box {
    width: 200rpx;
    height: 100vh;
    line-height: 50rpx;
    text-align: center;
    background: #fff;
    flex-shrink: 0; // 防止被挤压
    .type {
      padding: 20rpx 0;
      height: 50rpx;
    }

    .active {
      color: $main-color;
      background: #F2F6F7;
    }
  }

  .list {
    padding: 20rpx;
    height: 97vh;

    .service {
      background-image: url("");
      background-size: cover;
      background-repeat: no-repeat;
      width: calc(100% - 40rpx);
      height: 280rpx;
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      border-radius: 20rpx;

      image {
        width: 70rpx;
        height: 90rpx;
        flex-shrink: 0; // 防止被挤压
      }

      .info {
        flex: 1;
        padding: 20rpx;

        .name {
          font-size: 32rpx;
          color: $main-color;
          // 最多显示两行，超出显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .price {
          margin: 10rpx 0;

          text {
            font-size: 32rpx;
            color: #EF835E;
          }
        }

        .desc {
          font-size: 24rpx;
          // 最多显示四行，超出显示省略号
          display: -webkit-box;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

    }
  }
}
</style>

